<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            /* overflow: hidden; */
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 2600px;
            height: 280px;
            left: 0px;
        }

        .imgContainer img {
            float: left;
        }

        .switch {
            font-size: 30px;
            float: right;
            width: 30px;
            height: 40px;
            color: white;
            position: absolute;
            top: 120px;
            right: 0px;
            background-color: rgba(2, 2, 2, 0.7);
        }

        .back {
            font-size: 30px;
            float: right;
            width: 30px;
            height: 40px;
            color: white;
            position: absolute;
            top: 120px;
            left: 0px;
            background-color: rgba(2, 2, 2, 0.7);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="imgContainer">
            <img src="./image/1t.png">
            <img src="./image/2t.png">
            <img src="./image/3t.png">
            <img src="./image/4t.png">
            <img src="./image/5t.png">
        </div>
        <div class="switch">></div>
        <div class="back">
            < </div>
        </div>
        <script>
            var imgContainerEle = document.querySelector(".imgContainer");

            var page = 1;// 代表当前的图片

            // 自动播放
            function autoPlay() {
                var str = setInterval(function () {
                    move(imgContainerEle, -520 * page, "left", function () {
                        console.log("运动完成");
                        page++;
                        if (page == 6) {
                            page = 1;
                            imgContainerEle.style.left = "0px";
                        }
                    })
                }, 3000);
                imgContainerEle.onmouseenter = function () {
                    clearInterval(str)
                }
                imgContainerEle.onmouseleave = function () {
                    autoPlay(str)
                }
            }
            cloneElement();
            autoPlay();
            // 克隆元素；
            // deepCopy
            function cloneElement() {
                var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
                var lastEle = imgContainerEle.lastElementChild.cloneNode(true)
                imgContainerEle.style.width = "3640px";
                imgContainerEle.appendChild(firstEle);
                imgContainerEle.appendChild(lastEle);
            }


            function move(ele, target, dir, cb) {
                function fn() {
                    var num = parseInt(getComputedStyle(ele)[dir]);
                    var speed = target < num ? -10 : 10;
                    if (num == target) {
                        console.log("停止了");
                        cb && cb();
                    } else {
                        num += speed;
                        ele.style[dir] = num + "px";
                        requestAnimationFrame(fn);
                    }
                }
                fn();
            }
            var getswitch = document.querySelector(".switch")
            getswitch.onclick = function () {
                move(imgContainerEle, -520 * page, "left", function () {
                    page++;
                    if (page == 6) {
                        page = 1;
                        imgContainerEle.style.left = "0px";
                    }
                })
            }
            var getback = document.querySelector(".back")
            getback.onclick = function () {
                move(imgContainerEle, -520 * page + 520, "left", function () {
                    page--;
                    if (page == 0) {
                        page = 5;
                        imgContainerEle.style.left = "2600"
                    }
                })
            }
        </script>
</body>

</html>